<template>
  <div class="questionInfo" v-if="bool">
    <hm-nav-bar
      path="/home/question"
      title="刷题"
      right="答题卡"
      @rightClick="rightClick"
    ></hm-nav-bar>
    <!-- <div class="content" v-if="info[currentIndex] && info[currentIndex].detail"> -->
    <div class="content" v-if="info.length > 0 && info[currentIndex].detail">
      <!-- <div class="content" v-if="info !== []"> -->
      <div class="title">
        【{{ typeObj[info[currentIndex].detail.type] }}】{{
          info[currentIndex].detail.title
        }}
      </div>
      <div class="tagList">
        <van-tag
          color="#f7f4f5"
          text-color="#b6b6bf"
          v-for="(item, index) in info[currentIndex].detail.tag"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
      <!-- 单选 -->
      <ul class="select" v-if="info[currentIndex].detail.type === 1">
        <!-- 关于right里面的判断:1.首先必须要有答案 2.为什么str[index]不能改成ans1呢,
        因为ans1就一个  str[index]是四个 因为遍历循环A B C D  因此总有一个是满足right的  这个操作是为了显示正确答案是那个(因为ABCD总有一个满足
        所以无论你选错还是对 都有正确答案样式显示出来)
        如果你用ans1的话  那么遍历四个一样的答案  你选错了 那么  就不会显示正确答案绿色right样式啦 因为不满足right条件-->

        <!-- 关于error样式:1.首先要有答案 2.答案等于A B C D其中一个 也就是 ansl === str[index]
        因为遍str[index]对应四个值 每个li对应一个 ansl === str[index] 如果没有这一步的话 假如你选错答案啦
        那么四个选项是显示错误样式 原因是遍历四个li都是 ansl !== info[currentIndex].ans.singleAnswer 都是error样式
        但道理你没加 ansl === str[index] && 你选择错了 正确答案 也会显示出来样式 这里不加 选错了的话四个都是错误样式 正确样式没显示出来
        这是因为样式优先级权重问题 你给选对样式加 !important 就可以看到啦 或者将成功样式写在error样式下面也行
         3.答案不等于正确答案 -->
        <li
          class="select-item"
          :class="{
            active: ansl === str[index],
            right:
              info[currentIndex].ans &&
              info[currentIndex].ans.singleAnswer === str[index],
            error:
              info[currentIndex].ans &&
              ansl === str[index] &&
              ansl !== info[currentIndex].ans.singleAnswer
          }"
          v-for="(item, index) in info[currentIndex].detail.option"
          :key="index"
          @click="clickLi(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 多选 -->
      <ul class="select" v-else-if="info[currentIndex].detail.type === 2">
        <!-- 多选不做错误 直接显示正确答案 错误处理没多大意义 -->
        <li
          class="select-item"
          :class="{
            active: ans2.includes(str[index]),
            right:
              info[currentIndex].ans &&
              info[currentIndex].ans.multipleAnswer.includes(str[index])
          }"
          v-for="(item, index) in info[currentIndex].detail.option"
          :key="index"
          @click="clickA(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 简答 -->
      <div class="select2" v-else>
        <van-field
          class="field"
          type="textarea"
          rows="5"
          v-model="ans3"
          @input="input"
          :disabled="sta > 1"
        >
        </van-field>
      </div>
      <div class="aswer" v-if="sta > 1">
        <h3 class="title">答案解析</h3>
        <!-- 也可以用v-if判断   根据题目类型判断  因为解答题没有正确答案这一说法  直接显示解析就行啦 所以还是应v-if判断把-->
        <!-- <div class="right">
          正确答案:{{
            info[currentIndex].ans.singleAnswer ||
              info[currentIndex].ans.multipleAnswer
          }}
        </div> -->
        <div class="rightQ" v-if="info[currentIndex].detail.type === 1">
          正确答案:{{ info[currentIndex].ans.singleAnswer }}
        </div>
        <div class="rightQ" v-else-if="info[currentIndex].detail.type === 2">
          正确答案:{{ info[currentIndex].ans.multipleAnswer }}
        </div>
        <div class="other">
          <span
            >难度:{{ difficultObj[info[currentIndex].ans.difficulty] }}</span
          >
          <span>提交次数:{{ info[currentIndex].ans.submitNum }}</span>
          <span>正确次数:{{ info[currentIndex].ans.correctNum }}</span>
        </div>
        <div class="txt">
          {{ info[currentIndex].ans.answerAnalysis }}
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footed">
      <div class="f1">
        <i class="iconfont">&#xe649;</i>
        <div class="txt">收藏</div>
      </div>
      <div class="f1">
        <i class="iconfont">&#xe606;</i>
        <div class="txt">反馈</div>
      </div>
      <div class="f2">
        <div class="txt">
          <span class="num">{{ currentIndex + 1 }}</span
          >/{{ info.length }}
        </div>
      </div>
      <div class="f3">
        <van-button
          v-if="sta <= 1"
          color="red"
          :disabled="sta == 0"
          @click.native="submit"
          >提交</van-button
        >
        <van-button v-else-if="sta === 2" color="red" @click.native="next"
          >下一题</van-button
        >
        <van-button v-else color="red">结束</van-button>
      </div>
    </div>
    <!-- 答题卡弹框 -->
    <van-popup v-model="showCard" position="bottom">
      <ul class="list">
        <li
          class="item"
          v-for="(item, index) in info"
          :key="index"
          @click="clickCard(index)"
          :class="{
            right: item.ans && item.ans.isRight,
            error: item.ans && !item.ans.isRight
          }"
        >
          {{ index + 1 }}
        </li>
        <li class="nouser"></li>
        <li class="nouser"></li>
        <li class="nouser"></li>
        <li class="nouser"></li>
        <li class="nouser"></li>
        <li class="nouser"></li>
        <li class="nouser"></li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import {
  interviewQuestions,
  questionsSubmit,
  questionInfo
} from '../../../api/question'
export default {
  data () {
    return {
      id: this.$route.query.id,
      city: this.$route.query.city,
      info: [], // 所有题目
      // 其实这个this.$route.query.currentIndex也可以设置在created里
      // 最开始没有currentIndex 因此我们要给个默认初始值 0
      currentIndex: Number(this.$route.query.currentIndex) || 0, // 当前题目
      typeObj: { 1: '单选', 2: '多选', 3: '简答' },
      str: 'ABCDEFGHI',
      sta: 0, // 0表示没答题  没选择 (此时提交按钮无法点击) 1表示答题但没提交 (提交按钮可以点击) 了但是还没提交
      // 2:点了提交,但没点下一题
      // 3:点了提交,但是没下一题了(已经是最后一题)

      ansl: '', // 单选答案
      ans2: [], // 多选答案
      ans3: '', // 简答答案,
      difficultObj: {
        1: '简单',
        2: '中等',
        3: '较难'
      },
      bool: true,
      showCard: false
    }
  },
  methods: {
    // 答题卡
    rightClick () {
      // alert('我被点击啦')
      this.showCard = true
    },
    // 单选 点击事件
    clickLi (index) {
      if (this.sta < 2) {
        this.ansl = this.str[index]
        this.sta = 1
      }
    },
    // 多选点击

    clickA (index) {
      if (this.sta < 2) {
        // window.alert('我被点啦')
        const _index = this.ans2.indexOf(this.str[index])
        // 不等于-1表示包含
        // 点击 已经有这个答案 那就删除 没有那就是选中这个答案
        if (_index !== -1) {
          this.ans2.splice(_index, 1)
        } else {
          this.ans2.push(this.str[index])
        }
        // 判断ans2中是否有答案 没有的话 提交按钮不能点击
        if (this.ans2.length > 0) {
          this.sta = 1
        } else {
          this.sta = 0
        }
        window.console.log('-----------ans2------')
        window.console.log(this.ans2)
      }
    },
    async submit () {
      this.$toast.loading({
        duration: 0,
        message: '加载中'
      })
      const res = await questionsSubmit({
        id: this.info[this.currentIndex].id,
        singleAnswer: this.ansl,
        multipleAnswer: this.ans2
      })
      window.console.log('00000000000000000000')
      console.log(res.data.data)
      res.data.data.ansl = this.ansl
      res.data.data.ans2 = this.ans2
      res.data.data.ans3 = this.ans3
      // 把答案解析 放在了ans上
      this.info[this.currentIndex].ans = res.data.data
      this.$toast.clear()
      // 判断是不是最后一题  currentIndex是从0 开始的 因此加1
      if (this.info.length === this.currentIndex + 1) {
        this.sta = 3
      } else {
        this.sta = 2
      }
    },
    async next () {
      this.currentIndex++
      // 下一题 那么  状态全都要回头开始状态
      this.clickCard(this.currentIndex)
      // this.sta = 0
      // this.ansl = ''
      // this.ans2 = []
      // this.ans3 = ''
      // this.$toast.loading({
      //   duration: 0,
      //   message: '加载中'
      // })
      // const res = await questionInfo(this.info[this.currentIndex].id)
      // // window.console.log('99999999999999999')
      // // window.console.log(res)
      // // 清除加载
      // this.$toast.clear()
      // // 点击下一题 根据id获取题目信息  默认第一题有题目 也是放在detail上 因此 我们将题目也放在这里
      // this.info[this.currentIndex].detail = res.data.data

      // this.bool = false
      // // 静默刷新  因为对象里面新增项 vue识别不了 需要 静默刷新一下
      // this.$nextTick(() => {
      //   this.bool = true
      // })
      // window.console.log(this.info)
    },
    // input是field中的一个事件 value是默认的回调参数
    input (value) {
      if (value.trim().length > 0) {
        this.sta = 1
      } else {
        this.sta = 0
      }
    },
    async clickCard (index) {
      this.currentIndex = index
      this.sta = 0
      this.showCard = false
      this.ansl = ''
      this.ans2 = []
      this.ans3 = ''
      if (!this.info[this.currentIndex].detail) {
        // 没有题目就获取题目
        this.$toast.loading({
          duration: 0,
          message: '加载中'
        })
        const res = await questionInfo(this.info[this.currentIndex].id)
        // window.console.log('99999999999999999')
        // window.console.log(res)
        // 清除加载
        this.$toast.clear()
        // 点击下一题 根据id获取题目信息  默认第一题有题目 也是放在detail上 因此 我们将题目也放在这里
        this.info[this.currentIndex].detail = res.data.data

        this.bool = false
        // 静默刷新  因为对象里面新增项 vue识别不了 需要 静默刷新一下
        this.$nextTick(() => {
          this.bool = true
        })
      } else {
        // 有题目 有答案(表示已经答题提交过)
        if (this.info[this.currentIndex].ans) {
          //  还原答案
          this.ansl = this.info[this.currentIndex].ans.ansl
          this.ans2 = this.info[this.currentIndex].ans.ans2
          this.ans3 = this.info[this.currentIndex].ans.ans3
          if (this.currentIndex + 1 === this.info.length) {
            this.sta = 3
          } else {
            this.sta = 2
          }
          // 有题目 没答案 表示还没做 就让sta变为0 这里不用设置 因为我们上面就已经让sta=0啦 点击就让他变为0 啦已经
          // 因此这里没必要在设置
        } else {
          // this.sta = 0
        }
      }
      // 实现刷新网页 还在当前题目  把currentIndex传到路由上(url路径上) 这里不能用fullPath 用fullPath的话
      // 每次点击下一题都会将每一提题的currentIndex 拼接在url上  因此应该用path  这个不带参数 我们可以手动拼接
      this.$router.push(
        `${this.$route.path}?city=${this.city}&id=${this.id}&currentIndex=${this.currentIndex}`
      )
    }
  },
  async created () {
    const res = await interviewQuestions({
      type: this.id,
      city: this.city
    })
    // window.console.log('11111112222222222')
    // window.console.log(res)
    this.info = res.data.data
    this.clickCard(this.currentIndex)
  }
}
</script>
<style lang="less" scoped>
.questionInfo {
  padding-bottom: 65px;
  .content {
    padding: 10px @p15 0;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 23px;
    }
    .select {
      margin-top: 25px;
      .select-item {
        background: #ffffff;
        border: 1px solid #f7f4f5;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 23px;
        padding: 10px;
      }
    }
    .select2 {
      margin-bottom: 15px;
      .field {
        border: 1px solid #ccc;
      }
    }
    .aswer {
      .title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .rightQ {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #1dc779;
        line-height: 23px;
        margin: 20px 0;
      }
      .other {
        margin-bottom: 20px;
        background: #f7f4f5;
        display: flex;
        justify-content: space-between;
        padding: 6px;
        font-size: 12px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #545671;
        line-height: 17px;
        letter-spacing: 0px;
      }
      .txt {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 23px;
      }
    }
  }
  .footed {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0 @p15;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: #ccc;
    text-align: center;
    font-size: 12px;
    .f1 {
      flex: 1;
      .iconfont {
        font-size: 24px;
      }
    }
    .f2 {
      flex: 2;
      .num {
        font-size: 18px;
        color: red;
      }
    }
    .f3 {
      flex: 2;
    }
  }
  .active {
    border: 1px solid skyblue !important;
  }
  .list {
    padding: 0 @p15;
    display: flex;
    justify-content: space-between;

    flex-wrap: wrap;
    .item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ccc;
      color: #fff;
      line-height: 40px;
      text-align: center;
      margin-right: 15px;
      margin-top: 15px;
      font-size: 14px;
    }
    .nouser {
      width: 40px;
      height: 0;
      margin-right: 15px;
    }
  }
  .right {
    background-color: green !important;
  }
  .error {
    background-color: red !important;
  }
}
</style>
